<template>
  <div class="common-form-modal-component">
    <a-modal
      :open="open"
      :title="title"
      :ok-text="$t('common.submit')"
      :cancel-text="$t('common.cancel')"
      @ok="handleSubmit"
      @cancel="updateOpen(false)"
      :confirm-loading="loading"
    >
      <a-form
        ref="formRef"
        :model="form"
        :rules="formRules"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-form-item :label="$t('setting.group')" name="groupId">
          <a-select v-model:value="form.groupId" :placeholder="$t('setting.selectGroup')">
            <a-select-option v-for="group in groupList" :key="group.id" :value="group.id">
              {{ group.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('setting.configName')" name="configName">
          <a-input v-model:value="form.configName" :placeholder="$t('setting.configNamePlaceholder')" />
        </a-form-item>
        <a-form-item :label="$t('setting.configKey')" name="configKey">
          <a-input v-model:value="form.configKey" :placeholder="$t('setting.configKeyPlaceholder')" />
        </a-form-item>
        <a-form-item :label="$t('setting.valueType')" name="valueType">
          <a-select v-model:value="form.valueType" :placeholder="$t('setting.valueTypePlaceholder')" @change="handleValueTypeChange">
            <a-select-option value="string">{{ $t('setting.string') }}</a-select-option>
            <a-select-option value="number">{{ $t('setting.number') }}</a-select-option>
            <a-select-option value="boolean">{{ $t('setting.boolean') }}</a-select-option>
            <a-select-option value="json">{{ $t('setting.json') }}</a-select-option>
            <a-select-option value="array">{{ $t('setting.array') }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('setting.configValue')" name="configValue">
          <a-textarea v-if="['string', 'json', 'array'].includes(form.valueType)" 
            v-model:value="form.configValue" 
            :placeholder="$t('setting.configValuePlaceholder')" 
            :auto-size="{ minRows: 3, maxRows: 6 }" />
          <a-input-number v-else-if="form.valueType === 'number'" 
            v-model:value="form.configValue" 
            style="width: 100%" />
          <a-radio-group v-else-if="form.valueType === 'boolean'" v-model:value="form.configValue">
            <a-radio value="true">{{ $t('common.yes') }}</a-radio>
            <a-radio value="false">{{ $t('common.no') }}</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item :label="$t('setting.isBuiltin')" name="builtIn">
          <a-radio-group v-model:value="form.builtIn">
            <a-radio :value="true">{{ $t('common.yes') }}</a-radio>
            <a-radio :value="false">{{ $t('common.no') }}</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item :label="$t('common.remark')" name="remark">
          <a-textarea v-model:value="form.remark" :placeholder="$t('common.remarkPlaceholder')" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import type { FormInstance } from 'ant-design-vue'
import type { SelectValue } from 'ant-design-vue/es/select'
import type { ConfigGroup } from '@/types/api/config/configGroup'
import type { CreateConfig } from '@/types/api/config/config'
import { useConfigFormRules } from '../config/formRules'

defineOptions({
  name: 'ConfigFormModal'
})

const { t } = useI18n() 

// 类型定义
type FormMode = 'add' | 'edit'

// Props定义
const props = withDefaults(defineProps<{
  open: boolean
  form: CreateConfig & { id?: string }
  mode: FormMode
  loading: boolean
  groupList: ConfigGroup[]
}>(), {
  open: false,
  mode: 'add',
  loading: false,
  groupList: () => []
})

// Emits定义
const emit = defineEmits<{
  (e: 'update:open', value: boolean): void
  (e: 'submit'): void
}>()

// 表单实例
const formRef = ref<FormInstance>()

// 更新open状态
const updateOpen = (value: boolean) => {
  emit('update:open', value)
}

// 弹窗标题
const title = computed(() => props.mode === 'add' ? t('setting.addConfig') : t('setting.editConfig'))

// 表单验证规则
const formRules = useConfigFormRules()

// 值类型变更处理
const handleValueTypeChange = (value: SelectValue) => {
  const valueType = String(value);
  
  // 根据值类型重置配置值
  switch (valueType) {
    case 'string':
      props.form.configValue = ''
      break
    case 'number':
      props.form.configValue = '0'
      break
    case 'boolean':
      props.form.configValue = 'false'
      break
    case 'json':
      props.form.configValue = '{}'
      break
    case 'array':
      props.form.configValue = '[]'
      break
  }
}

// 提交表单
const handleSubmit = async () => {
  try {
    await formRef.value?.validate()
    emit('submit')
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

// 监听弹窗关闭
watch(() => props.open, (val) => {
  if (!val) {
    formRef.value?.resetFields()
  }
})

// 导出表单实例
defineExpose({
  formRef
})
</script>

<style lang="scss" scoped>
@import '@/assets/styles/views/common.scss';
</style> 